<template>
	<view class="home">
		<div class="menu" v-for="(menu,index) in menuList" :key='index'>
			<u-button :text="menu.title" :color="randomColor()" @click="menuClick(menu)"></u-button>
		</div>
	</view>
</template>

<script>
	// import pages from '@/pages.json'
	const {
		default: pages
	} = require('@/pages.json')
	console.log(pages, 'pages');
	export default {
		data() {
			return {
				menuList: []
			}
		},
		created() {
			this.menuList = pages.pages.map(x => {
				return {
					title: x.style.navigationBarTitleText,
					path: x.path
				}
			}).filter(x => x.title !== '首页')
		},
		methods: {
			menuClick(menu) {
				console.log(menu, 'menu');
				uni.navigateTo({
					url: '/' + menu.path,
					fail(res) {
						console.log(res);
					}
				})
			},
			// 获取随机颜色
			randomColor() {
				const r1 = Math.floor(Math.random() * 256);
				const g1 = Math.floor(Math.random() * 256);
				const b1 = Math.floor(Math.random() * 256);
				const r2 = Math.floor(Math.random() * 256);
				const g2 = Math.floor(Math.random() * 256);
				const b2 = Math.floor(Math.random() * 256);
				return `linear-gradient(to right, rgb(${r1}, ${g1}, ${b1}), rgb(${r2}, ${g2}, ${b2}))`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		height: calc(100vh - 44px);
		overflow-y: auto;

		.menu {
			width: 100%;
			height: 40px;
			padding: 0 12px;
			margin: 8px 0;
		}
	}
</style>
